<template>
  <div>
    <el-popover
       placement="bottom"
       title="通知公告"
       width="550"
       trigger="click">
       <el-table v-loading="loading" :data="DataList">
         <el-table-column label="序号" align="center" prop="id" width="50" />
         <el-table-column
           label="公告标题"
           align="center"
           prop="notice_title"
           :show-overflow-tooltip="true"
         >
          <template slot-scope="scope">
            <el-link @click="handleShow(scope.row)" v-hasPermi="['NoticeController@show']" type="warning">{{scope.row.notice_title}}</el-link>
           </template>
         </el-table-column>
         <el-table-column label="创建时间" align="center" prop="created_at" width="100">
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.created_at, '{y}-{m}-{d}') }}</span>
           </template>
         </el-table-column>
       </el-table>

       <pagination
         v-show="total>0"
         :total="total"
         :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
         @pagination="getList"
       />
         <svg-icon slot="reference" icon-class="message" @click="goto"/>
     </el-popover>
     <!-- 添加或修改公告对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="公告标题" prop="notice_title">
               {{form.notice_title}}
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="公告类型" prop="notice_type">
               {{form.notice_type==1?"公告":"通知"}}
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="状态">
               {{form.state==0?"关闭":"开启"}}
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="内容">
               {{form.notice_content}}
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
     </el-dialog>
  </div>
</template>

<script>
import * as Notice from "@/api/system/notice";
export default {
  name: 'doc',
  dicts: ['sys_notice_status', 'sys_notice_type'],
  data() {
    return {
      total:0,
      title:"",
      loading:false,
      open:false,
      form:{},
      rules:{},
      queryParams:{
        pageNum: 1,
        pageSize: 10
      },
      DataList: [],
      url: ''
    }
  },
  mounted(){

  },
  methods: {
    /** 查询公告列表 */
    getList() {
      this.loading = true;
      Notice.listNotice(this.queryParams).then(response => {
        this.DataList = response.data.data;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 修改按钮操作 */
    handleShow(row) {
      let that=this;
      const id = row.id || this.ids
      Notice.getNotice(id).then(response => {
        that.form = response.data;
        that.open = true;
        that.title = "公告详情";
      });
    },
    goto() {
      this.getList();
    }
  }
}
</script>
